<template>
  <div class="login">
    <!-- 头部导航 -->
    <navBar></navBar>
    <!-- 用户登录信息 -->
    <van-form @submit="onSubmit" class="form">
      <van-field
        v-model="phone"
        name="用户名"
        center
        placeholder="请输入手机号"
        :rules="[
          { required: true, message: '请填写手机号码' },
          { pattern, message: '手机号码不合法' }
        ]"
      >
        <template #left-icon>
          <span class="iconfont icon-iphone"></span>
        </template>
      </van-field>
      <div class="t">
        <van-field
          v-model="code"
          name="密码"
          center
          placeholder="请输入验证码"
          :rules="[{ required: true, message: '请填写验证码' }]"
        >
          <template #left-icon>
            <span class="iconfont icon-lock"></span>
          </template>
        </van-field>
        <div class="codeBtn">
          <div @click="isCode" class="getCode" v-if="tiemNum === 6">
            发送验证码
          </div>
          <div class="getCode" v-else>{{ tiemNum }}s后重新发送</div>
        </div>
      </div>
      <!-- 登录按钮 -->
      <div class="btn">
        <van-button block type="info" native-type="submit">登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { getLoginApi } from '../../api/login'
import { localSet } from '../../utils/mylocal'
import { mapMutations } from 'vuex'
export default {
  created () {
    console.log(this.$route)
  },
  data () {
    return {
      // 正则手机号效验
      pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
      // 手机号码
      phone: '13911112222',
      // 验证码
      code: '',
      // 计时器
      tiemNum: 6
    }
  },
  methods: {
    // 个人信息
    ...mapMutations(['setUserInfo']),
    // form表单验证
    async onSubmit () {
      this.$toast({
        type: 'loading', // success 成功, loading 加载, fail 失败
        message: '页面跳转中...'
      })
      const res = await getLoginApi({
        mobile: this.phone,
        code: this.code
      })
      if (res.message === 'OK') {
        // 保存token
        localSet('token', res.data)
        // 跳转我的页面
        if (this.$route.query.redirect) {
          this.$router.push(this.$route.query.redirect)
        } else {
          this.$router.push('/my')
        }

        this.$toast({
          type: 'success', // success 成功, loading 加载, fail 失败
          message: '欢迎您！登录成功'
        })
      } else {
        this.$toast({
          type: 'fail', // success 成功, loading 加载, fail 失败
          message: '登录失败'
        })
      }
    },
    // 优化登录验证码倒计时
    isCode () {
      // 弹出验证码轻提示
      this.$toast({
        type: 'success', // success 成功, loading 加载, fail 失败
        message: '246810'
      })
      this.code = '246810'
      var tiemID = setInterval(() => {
        this.tiemNum--
        if (this.tiemNum <= 0) {
          clearInterval(tiemID)
          this.tiemNum = 6
        }
      }, 1000)
    }
  }
}
</script>

<style lang="less" scoped>
@import url('../../style/index.css');
.login {
  font-size: 14px;
  .form {
    padding: 50px 15px 0 15px;
    .t {
      position: relative;
    }
    .codeBtn {
      position: absolute;
      top: 15%;
      right: 20px;
      .getCode {
        padding: 6px;
        border-radius: 20px;
        color: #666;
        background-color: #ededed;
      }
    }
  }
  .btn {
    margin-top: 30px;
    border-radius: 0px;
  }
}
</style>
